<!--
- Author:   .
- Date:    2017/7/27 0027.
- File:    pay.
-->
<template>
  <div v-show="show">
    <div class="PopBg z99" style="z-index: 999" id="PopBg"></div>
    <div style="z-index: 1000">
      <div class="Inputpassword">
        <p class="tismima">输入密码</p>
        <div class="myphone" style="position: relative">
          <input ref="password" type="password" class="yanzheng" style="letter-spacing: 1.9rem" placeholder="" id="yzm" v-model="password" maxlength="6">
          <ul class="pwd-wrap" @click="focus">
            <li><i v-if="password.length > 0"></i></li>
            <li><i v-if="password.length > 1"></i></li>
            <li><i v-if="password.length > 2"></i></li>
            <li><i v-if="password.length > 3"></i></li>
            <li><i v-if="password.length > 4"></i></li>
            <li><i v-if="password.length > 5"></i></li>
          </ul>
        </div>
        <div>
          <div class="passwordbtn" style="width: 50%; float: left;border-right: 1px solid #eee" @click="pwdConfirm">确定</div>
          <div class="passwordbtn" style="width: 50%; float: left; color: #999" @click="canclePwd">取消</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  //  import {mapModules, mapRules} from 'vuet'

  export default{
//    mixins: [
//      mapModules({memberInfo: 'memberInfo'}),
//      mapRules({once: ['memberInfo']})
//    ],
    data() {
      return {
        show: true,
        password: '',
        param: {}, // {paySn: '', orderId: ''}
        memberInfo: '',
        successHandle: function () {
        },
        failHandle: function () {
        },
        closedHandle: function () {
        }
      }
    },
    components: {},
    created() {
    },
    watch: {
      show: function (val) {
        this.password = ''
      }
    },
    methods: {
      focus() {
        this.$refs.password.focus()
      },
      switchShowPay(boolValue) {
        this.show = boolValue
      },
      closePop() {
        this.switchShowPay(false)
//        this.closedHandle()
      },
      pwdConfirm() {
        if (!this.$validator.pwd(this.password)) {
          this.$toast('请输入6位数字密码')
          return
        }
        this.$request.payPwdConfirm(this.password).then(data => {
          this.switchShowPay(false)
          this.successHandle()
        }).catch(e => {
          console.log('验证密码失败：', e)
          this.$toast(e.msg)
          this.failHandle()
        })
      },
      canclePwd() {
        this.show = false
        this.closedHandle()
      }
    }
  }
</script>

<style>
  .pwd-wrap {
    width: 100%;
    height: 40px;
    padding-bottom: 1px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #ddd;
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    cursor: pointer;
    position: absolute;
    top: 0;
  }

  .pwd-wrap li {
    list-style-type: none;
    text-align: center;
    line-height: 44px;
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-flex: 1;
    border-right: 1px solid #ddd;
  }

  .pwd-wrap li:last-child {
    border-right: 0;
  }

  .pwd-wrap li i {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background: #000;
    display: inline-block;
  }
</style>